import React, { Component } from 'react'
import { Statistic } from 'antd'
import PubSub from 'pubsub-js'

const { Countdown } = Statistic

export default class CountdownDetail extends Component {

    state = {
        deadline: null
    }

    componentDidMount() {
        this.pubsub_first = PubSub.subscribe('firstCountDown', (msg, data) => {
            let deadline = Date.now() + 1000 * 60 * data
            this.setState({ deadline })
        })

        this.pubsub_continue = PubSub.subscribe('continueCountDown', (msg, data) => {
            let deadline = new Date(data) * 1
            this.setState({ deadline })
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.pubsub_first, this.pubsub_continue)
    }

    onFinish = () => {
        this.props.handleOk()
    }

    render() {
        const { answerTimeLimit } = this.props
        const { deadline } = this.state

        return (
            <Countdown value={deadline} valueStyle={{ color: '#36aafd', fontSize: 34 }} format={answerTimeLimit > 60 ? 'HH:mm:ss' : 'mm:ss'} onFinish={this.onFinish} />
        )
    }
}